<template>
    <div>
        <h2>用户人数统计</h2>
        <div id="chartone" class="one">

        </div>
    </div>
</template>

<script setup>
import { inject, onMounted, reactive } from "vue";
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
let $echarts = inject("echarts")

// let data=reactive({})
let xdata = reactive([])
let ydata = reactive([])


onMounted(() => {
    let myChart = $echarts.init(document.getElementById("chartone"))

    Link(apiurl.chartDataOne).then((ok) => {
        let { data } = ok;
        console.log(data);
        xdata = data.map(v => v.title)
        ydata = data.map(v => v.num)
        console.log("x", xdata);
        console.log("y", ydata);

        myChart.setOption({
            legend: {},
            tooltip: {},
            xAxis: {
                type: "value",
                axisLine: {
                    lineStyle: {
                        color: "#000000"
                    }
                }
            },
            yAxis: {
                type: "category",
                data: xdata,
                axisLine: {
                    lineStyle: {
                        color: "#000000"
                    }
                }
            },
            grid: {
                top: "0%",
                left: "1%",
                botton: "10%",
                right: "6%",
                containLabel: true
            },
            series: [
                {
                    type: "bar",
                    data: ydata,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [0, 20, 20, 0],
                            color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: "#005eaa"

                                },
                                {
                                    offset: 0.5,
                                    color: "#339ca8"

                                },
                                {
                                    offset: 1,
                                    color: "#cda819"

                                }
                            ])
                        }
                    }
                }
            ]
        })
    })



})
</script>

<style lang='scss' scoped>
h2 {
    height: 0.4rem;
    color: #000000;
    line-height: 0.2rem;
    text-align: center;
    font-size: 0.4rem;
}

.one {
    height: 4.5rem;
}
</style>